<template>
    <div class="works">
        <div class="title">
            作品展示
        </div>
        <div class="title-nav">
            <span :class="{ nav: true, ant: pagesType == 'datapacks' }" @click="pagesType = 'datapacks'">数据包</span>
            <span :class="{ nav: true, ant: pagesType == 'maps' }" @click="pagesType = 'maps'">地图</span>
            <span :class="{ nav: true, ant: pagesType == 'games' }" @click="pagesType = 'games'">游戏</span>
        </div>
        <div class="card">
            <div class="bar-null" v-if="dataInfo == null">
                暂无数据
            </div>
            <a-card hoverable class="bar" @click="OpenModalT(info)" v-else v-for=" info  in  dataInfo "
                :key="info.name" style="width: 300px">
                <template #cover>
                    <img alt="example" :src="info.image_url" />
                </template>
                <a-card-meta>
                    <template #title>
                        {{ info.name }}
                    </template>
                    <template #description>
                        <span style="color:#409EFF;padding: 20px;">
                            作者：{{ info.avatar }}
                        </span>
                        <br />
                        <span v-if="info.version" style="color: #E6A23C;padding: 20px;">
                            {{ info.version }}
                        </span>
                        <p style="padding: 10px;">
                            {{ info.description }}
                        </p>
                    </template>
                </a-card-meta>
            </a-card>
        </div>
        <div>
            <a-modal v-model:open="OpenModal" :footer="null" centered>
                <div style="text-align: center;">
                    <h1>{{ OpenModalTitle }}</h1>
                    <p>请选择</p>
                    <a-space wrap>
                        <a-button type="primary" @click="OpenUrl(OpenModalVideoUrl)" :disabled="OpenModalVideo">
                            <template #icon>
                                <play-circle-outlined />
                            </template>
                            看视频
                        </a-button>
                        <a-button type="primary" @click="OpenUrl(OpenModalDownloadUrl)" :disabled="OpenModalDownload">
                            <template #icon>
                                <download-outlined />
                            </template>
                            去下载
                        </a-button>
                    </a-space>
                </div>
            </a-modal>
        </div>
    </div>
</template>

<style scoped lang="scss">
.works {
    .title {
        font-size: 4rem;
        font-weight: 400;
        height: 100%;
        line-height: 100px;
        white-space: nowrap;
        display: flex;
        text-align: center;
    }

    .title-nav {
        .nav {
            &:hover {
                cursor: pointer;
                color: #409EFF;
                border: 2px solid #409EFF;
            }

            margin: 20px;
            font-size: 3rem;
            width: 100%;
            height: 100%;
            white-space: nowrap;
            border-radius: 20px;
            border: 2px solid #000;
            display: flex;
            text-align: center;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
        }

        .ant {
            color: #409EFF;
            border: 2px solid #409EFF;
        }

        width: 60%;
        height: 100%;
        display: flex;
        text-align: center;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        flex-wrap: nowrap;
    }

    .card {
        .bar {
            max-width: auto;
            border-radius: 20px;
            margin: 10px;
        }

        .bar-null {
            padding: 20px;
            font-size: 2em;
            width: 100%;
            text-align: center;
        }

        text-align: center;
        margin: 20px;
        width: 80%;
        border-radius: 12px;
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}

@media screen and (max-width: 800px) {
    .works {
        .title {
            font-size: 2rem;
            font-weight: 400;
            height: 100%;
            line-height: 100px;
            white-space: nowrap;
            display: flex;
            text-align: center;
        }

        .title-nav {
            .nav {
                &:hover {
                    cursor: pointer;
                    color: #409EFF;
                    border: 2px solid #409EFF;
                }

                margin: 10px;
                padding: 10px;
                font-size: 2rem;
                width: 100%;
                height: 100%;
                white-space: nowrap;
                border-radius: 20px;
                border: 2px solid #000;
                display: flex;
                text-align: center;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                flex-wrap: nowrap;
            }

            .ant {
                color: #409EFF;
                border: 2px solid #409EFF;
            }

            width: 60%;
            height: 100%;
            display: flex;
            text-align: center;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            flex-wrap: nowrap;
        }

        .card {
            .bar {
                max-width: auto;
                border-radius: 20px;
                margin: 10px;
            }

            .bar-null {
                padding: 20px;
                font-size: 2em;
                width: 100%;
                text-align: center;
            }

            text-align: center;
            margin: 20px;
            width: 80%;
            border-radius: 12px;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }
}
</style>

<script>
import { message } from 'ant-design-vue';
import { PlayCircleOutlined, DownloadOutlined } from '@ant-design/icons-vue';
import Api from '@/api/api';
const axios = require('axios');
var FormData = require('form-data');

export default {
    data() {
        return {
            pagesType: null,
            dataInfo: null,
            OpenModal: false,
            OpenModalDownloadUrl: "",
            OpenModalDownload: false,
            OpenModalVideo: false,
            OpenModalVideoUrl: '',
            OpenModalTitle: "",
            datapacks_Info: null
        }
    },
    components: {
        PlayCircleOutlined,
        DownloadOutlined
    },
    watch: {
        pagesType() {
            if (this.pagesType == 'datapacks') {
                this.getInfo(this.pagesType)
                this.OpenModalDownloadUrl = ""
                this.OpenModalVideoUrl = ""
            } else if (this.pagesType == 'maps') {
                this.getInfo(this.pagesType)
                this.OpenModalDownloadUrl = ""
                this.OpenModalVideoUrl = ""
            } else {
                this.getInfo(this.pagesType)
                this.OpenModalDownloadUrl = ""
                this.OpenModalVideoUrl = ""
            }
        }
    },
    methods: {
        OpenUrl(url, type) {
            if (!url) {
                if (type == 'maps') {
                    message.error("地图暂不提供下载链接")
                } else {
                    message.error("暂无链接")
                }
            } else {
                window.open(url)
            }
        },
        getInfo(type) {
            var config = {
                method: 'get',
                url: '/' + type + '_info.json',
            };
            var that = this
            axios(config)
                .then(function (response) {
                    if (response) {
                        if (response.data) {
                            if (type == "datapacks") {
                                that.datapacks_Info = response.data
                                that.getnotice()
                            } else {
                                that.dataInfo = response.data
                            }
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        getnotice() {
            var data = new FormData();
            data.append('apikey', Api.apikey);

            var config = {
                method: 'post',
                url: 'https://api.dbhg.top/api/dbhg/config',
                data: data
            };
            var that = this
            axios(config)
                .then(function (response) {
                    if (response) {
                        if (response.data) {
                            if (response.data.code == 200) {
                                that.dataInfo = that.datapacks_Info
                            }
                        }
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        OpenModalT(info) {
            var that = this
            if (info) {
                that.OpenModalTitle = info.name
                if (!info.download_url) {
                    that.OpenModalDownload = true
                } else {
                    that.OpenModalDownloadUrl = ""
                    that.OpenModalDownloadUrl = info.download_url
                    that.OpenModalDownload = false
                }
                if (!info.video_url) {
                    that.OpenModalVideo = true
                } else {
                    that.OpenModalVideoUrl = ""
                    that.OpenModalVideoUrl = info.video_url
                    that.OpenModalVideo = false
                }
            }
            that.OpenModal = true
        }
    },
    created() {
        this.pagesType = 'datapacks'
    }
}

</script>